
<template>
  <div class="container">
    <el-scrollbar>
      <div v-for="item in 3 " :key="item" >
        <div class="first-line">
          <div style="display: flex;align-items:center;">
            <div class="round">
              <div class="round-inner"></div>
            </div>
            <div class="name">统一支付平台</div>
          </div>

          <div class="status">进行中</div>
        </div>
        <div class="context">项目开发人员工作安排，计划10人精英团队研发该项目</div>
        <div class="context">截止时间： 2024-12-30   12:00:00</div>
        <el-divider />
      </div>
    </el-scrollbar>

  </div>
</template>
<script>
export default {
  name: 'MiddleRight'
}
</script>

<style scoped lang="scss">
.container{
  box-sizing: border-box;
  height: 15.26vw;
  padding: 0.781vw;
  background-color: var(--el-bg-color);
  border-radius: 0.26vw;

  .first-line{
    .round{
      position: relative;
      width: 0.781vw;
      height: 0.781vw;
      margin-right: 0.521vw;
      background-color:#1762f2;
      border-radius: 50%;

      .round-inner{
        position: absolute;
        inset: 0;
        width: 0.469vw;
        height: 0.469vw;
        margin: auto;
        background-color: #fff;
        border-radius: 50%;
      }
    }

    .name{
      font-weight: 600;
    }

    display: flex;
    justify-content: space-between;

    .status{
      width: 3.125vw;
      color: #1762F2;
      text-align: center;
      border: 0.052vw solid #1762F2;
      border-radius: 0.26vw;
    }
  }

  .context{
    margin-top: 0.521vw;
    color:  #89919c;
    font-size: 0.781vw;
  }
}
</style>
